<template>
    <div class="main-container">
        <div class="bolg-list-container">
            <!-- 左侧导航 -->
            <div class="index-nav">
                <div class="side-navigator-wrap">
                    <div class="nav-item-wrap">
                        <div class="nav-item">
                            <IconifyIconOnline icon="ant-design:clock-circle-filled" />
                            <span>后台设计</span>
                        </div>
                    </div>
                    <div class="nav-item-wrap">
                        <div class="nav-item">
                            <IconifyIconOnline icon="ant-design:clock-circle-filled" />
                            <span>后台设计</span>
                        </div>
                    </div>
                    <div class="nav-item-wrap">
                        <div class="nav-item">
                            <IconifyIconOnline icon="ant-design:clock-circle-filled" />
                            <span>后台设计</span>
                        </div>
                    </div>
                    <div class="nav-item-wrap">
                        <div class="nav-item">
                            <IconifyIconOnline icon="ant-design:clock-circle-filled" />
                            <span>后台设计</span>
                        </div>
                    </div>
                    <div class="nav-item-wrap">
                        <div class="nav-item">
                            <IconifyIconOnline icon="ant-design:clock-circle-filled" />
                            <span>后台设计</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 中间内容 -->
            <div class="entry-list-container">
                <div class="list-header">
                    <div class="nav-list">
                        <div class="nav-item">推荐</div>
                        <div class="nav-item">最新</div>
                    </div>
                    <div class="search-header">
                        <el-input>

                        </el-input>
                        <div class="search-icon">
                            <IconifyIconOnline icon="ant-design:search-outlined" />
                        </div>

                    </div>
                </div>
                <div class="entry-list-wrap">
                    <div class="entry-list">
                        <div v-for=" i in 10" class="item">
                            <div class="content-main">
                                <div class="title-row">生成网页：AI 直接把「低代码」干掉了</div>
                                <div class="abstract">
                                    最近参加了一个社群活动，主题是如何快速制作一个「海外工具站」来实现被动收入。这里就把快速用 AI 实现网站的这部分拿出来分享一下，有惊喜，也有坑。
                                </div>
                                <div class="entry-footer">
                                    <ul class="action-list">
                                        <li class="item"><span>青玉白露</span></li>
                                        <li class="item">
                                            <IconifyIconOnline icon="ant-design:eye-outlined" />
                                            <span>7.3</span>
                                        </li>
                                        <li class="item">
                                            <IconifyIconOnline icon="ant-design:like-outlined" />
                                            <span>60</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <el-image class="img-wrap"
                                src="https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/c29743096c454b2594e44e3f5c701ec1~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5LiN566A6K-0:q75.awebp?rk3s=f64ab15b&x-expires=1734682008&x-signature=gtkkaOMB0EPqCB1l9ihmsj5XDA0%3D"
                                :fit="fit" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import IconifyIconOnline from '@/components/global/iconifyIconOnline.js'
defineOptions({
    name: 'BlogList',
    inheritAttrs: true,
})
</script>

<style scoped lang="scss">
.bolg-list-container {
    position: relative;
    margin: 0 auto;

    max-width: 1200px;
    display: flex;

    .index-nav {
        position: sticky;
        top: 0px;
        width: 180px;
        background-color: #fff;
        margin-right: 20px;
        // 设置元素的高度为 fit-content，即根据内容自动调整高度
        height: fit-content;

        .side-navigator-wrap {
            padding: 8px;
            font-size: 16px;
            color: #515767;

            .nav-item-wrap {
                .nav-item {
                    display: flex;

                    align-items: center;
                    padding: 10px 17px;
                    cursor: pointer;
                    transition: .2s;

                    &:hover {
                        color: #1e80ff;
                        background-color: #f5f7fa;
                    }

                    &>span {
                        margin-left: 12px;
                    }
                }
            }
        }
    }

    .entry-list-container {
        width: 720px;
        background-color: #fff;

        .list-header {
            border-bottom: 1px solid #e4e6eb;
            display: flex;
            align-items: center;
            justify-content: start;

            .nav-list {
                display: flex;
                align-items: center;
                height: 50px;
                font-size: 16px;
                color: #515767;

                .nav-item {
                    padding: 0 12px;
                    cursor: pointer;
                    transition: .2s;

                    &:hover {
                        color: #1e80ff;
                    }
                }
            }

        }

        .search-header {
            height: 35px;
            width: 200px;
            display: flex;
            border: 1px solid #c2c8d1;

            :deep(.el-input__wrapper) {
                box-shadow: none;
            }

            .search-icon {
                cursor: pointer;
                padding: 4px 14px 0;
                font-size: 32px;
                line-height: 32px;
                background-color: #f2f3f5;
            }
        }

        .entry-list-wrap {
            .entry-list {
                &>.item:hover {
                    background-color: #f7f8fa;
                    ;
                }

                &>.item {
                    padding: 12px 20px 12px;
                    border-bottom: 1px solid #e4e6eb80;
                    display: flex;
                    cursor: pointer;

                    .content-main {
                        flex: 1 1 auto;

                        .abstract {
                            // 设置文本颜色为 #8a919f
                            color: #8a919f;
                            // 设置字体大小为 13px
                            font-size: 13px;
                            // 设置行高为 22px
                            line-height: 22px;
                            // 使用 WebKit 私有属性设置文本溢出处理
                            display: -webkit-box;
                            // 内容超出时隐藏
                            overflow: hidden;
                            // 文本溢出时显示省略号
                            text-overflow: ellipsis;
                            // 设置 WebKit 私有属性，指定文本的排列方式为垂直
                            -webkit-box-orient: vertical;
                            // 使用 WebKit 私有属性，指定文本最多显示 1 行
                            -webkit-line-clamp: 1;

                        }

                        .entry-footer {
                            ul {
                                display: flex;

                                .item {
                                    display: flex;
                                    color: #8a919f;
                                    margin-right: 24px;
                                    font-size: 13px;
                                    line-height: 20px;
                                    flex-shrink: 0;

                                    &>span {
                                        margin-left: 4px;
                                    }
                                }
                            }
                        }
                    }

                    .img-wrap {
                        width: 108px;
                        height: 72px;
                        margin-left: 24px;
                        flex: 0 0 auto;
                    }
                }
            }
        }
    }
}
</style>
